<!-- 异常监测 -->
<template>
  <div class="contain">
    <div class="contain-box">
      <div class="top-title">
        账号活跃度：
        <el-select v-model="formData.providerNo" @change="statisticActive" clearable placeholder="请选择运营平台">
          <el-option
            v-for="item in platList"
            :key="item.providerNo"
            :label="item.name"
            :value="item.providerNo">
          </el-option>
        </el-select>
        <el-select v-model="formData.type" @change="statisticActive" clearable placeholder="请选择统计的范围" style="margin: 0 15px;">
          <el-option
            v-for="item in rangeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-date-picker
          v-model="formData.month"
          type="month"
          @change="statisticActive"
          placeholder="请选择统计月份">
        </el-date-picker> -->
        <el-date-picker
          v-model="searchTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          :picker-options="pickerOptions"
          @change="statisticActive"
        >
        </el-date-picker>
      </div>
      <div class="top-box">
        <div class="chart-title">用户活跃统计结果</div>
        <div class="chart-content">
          <echart :options="options" height="100%" />
        </div>
      </div>
    </div>
    <div class="contain-box mt20">
      <div class="top-title">
        业务数据采集：
          <!-- <el-select v-model="formData.plat" clearable placeholder="请选择统计时间段">
            <el-option
              v-for="item in timeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            :picker-options="pickerOptions"
            @change="getSearchTime"
          >
          </el-date-picker>
      </div>
      <div class="top-box two">
        <div class="bar-box">
          <div class="chart-title">项目订单总数: {{ total }}</div>
          <div class="chart-content">
            <echart :options="options2" height="100%" />
          </div>
        </div>
        <div class="bar-box">
          <div class="chart-title">农机订单服务总亩数: {{ total2 }}</div>
          <div class="chart-content">
            <echart :options="options3" height="100%" />
          </div>
        </div>
      </div>
    </div>
    <div class="contain-box mt20">
      <div class="top-title">
        系统故障数：
        <el-select v-model="formData.service" @change="statisticsFailure" clearable placeholder="请选择统计的服务">
          <el-option
            v-for="item in serviceList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="top-box">
        <div class="chart-title">系统故障数统计结果</div>
        <div class="chart-content">
          <echart :options="options4" height="100%" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echart from "@/components/Echarts/baseMain/index.vue";
import Api from "@/api/agricultural-social/data-center/business-statistics.js";
import { dateToFormat, dateToFormatYMD } from "@/utils/time.js";
export default {
  components: {
    echart
  },
  data() {
    return {
      formData: {},
      platList: [],
      rangeList: [
        { label: '全部', value: '' },
        { label: '运营方人数', value: '2' },
        { label: '入驻服务方人数', value: '3' },
        { label: '入驻终端用户人数', value: '4' },
      ],
      timeList: [
        { label: '全部', value: '' },
        { label: '当年', value: '1' },
        { label: '当月', value: '2' },
        { label: '当周', value: '3' },
      ],
      serviceList: [
        { label: '全部', value: '' },
        { label: 'farming-socialized-gateway', value: 'farming-socialized-gateway' },
        { label: 'socialized-admin', value: 'socialized-admin' },
        { label: 'socialized-service', value: 'socialized-service' },
        { label: 'socialized-business', value: 'socialized-business' },
        { label: 'socialized-finance', value: 'socialized-finance' },
        { label: 'socialized-notice', value: 'socialized-notice' },
        { label: 'socialized-system', value: 'socialized-system' },
        { label: 'socialized-auth', value: 'socialized-auth' },
      ],
      searchTime: [],
      options: {},
      options2: {},
      options3: {},
      options4: {},
      total: '-',
      total2: '-',
      time: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '当月',
            onClick(picker) {
              let year = new Date().getFullYear()
              let month = new Date().getMonth() + 1
              const now = new Date();
              const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
              const day = lastDay.getDate();
              month = month > 9 ? month : '0' + month
              picker.$emit('pick', [new Date(year+'-'+month+'-01 00:00:00'), year+'-'+month+'-'+day+' 23:59:59']);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '当年',
            onClick(picker) {
              let year = new Date().getFullYear()
              picker.$emit('pick', [new Date(year+'-01-01 00:00:00'), year+'-12-31 23:59:59']);
            }
          }
        ]
      },
    };
  },
  mounted () {
    this.queryProvider()
    this.statisticActive()
    this.statisticalDataCount()
    this.statisticalMuCount()
    this.statisticsFailure()
  },
  methods: {
    // 所以运营方
    queryProvider () {
      Api.queryProvider().then(res => {
        this.platList = res.data
      })
    },
    // 账号活跃度
    statisticActive () {
      Api.statisticActive({
        providerNo: this.formData.providerNo,
        type: this.formData.type,
        startTime: this.searchTime[0] ? dateToFormatYMD(this.searchTime[0]) + ' 00:00:00' : '',
        endTime: this.searchTime[1] ? dateToFormatYMD(this.searchTime[1]) + ' 23:59:59' : '',
      }).then(res => {
        if (res.code == 200) {
          let xAxis = [], data = []
          res.data.map(el => {
            for (let key in el) {
              xAxis.push(key)
              data.push(el[key])
            }
          })
          this.options = {
            grid: {
              left: '10',
              right: '10',
              bottom: '10',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '用户活跃数',
                data,
                type: 'line',
                smooth: true
              }
            ]
          }
        } else {
          this.options = {}
        }
      })
    },
    // 系统故障数
    statisticsFailure () {
      Api.statisticsFailure({
        serviceName: this.formData.service
      }).then(res => {
        if (res.code == 200) {
          let xAxis = [], data = []
          for (let key in res.data) {
            xAxis.push(key)
            data.push(res.data[key])
          }
          this.options4 = {
            grid: {
              left: '10',
              right: '10',
              bottom: '10',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '系统故障数',
                data,
                type: 'line',
                smooth: true
              }
            ]
          }
        } else {
          this.options4 = {}
        }
      })
    },
    getSearchTime () {
      this.statisticalDataCount()
      this.statisticalMuCount()
    },
    // 业务统计-业务数据采集-订单总数
    statisticalDataCount () {
      Api.statisticalDataCount({
        startTime: this.time[0] ? dateToFormatYMD(this.time[0]) + ' 00:00:00' : '',
        endTime: this.time[1] ? dateToFormatYMD(this.time[1]) + ' 23:59:59' : '',
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.total || '-'
          let xAxis = [], data = []
          for (let key in res.data.data) {
            xAxis.push(key)
            data.push(res.data.data[key])
          }
          this.options2 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '10',
              right: '10',
              bottom: '10',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xAxis,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '项目订单总数',
                type: 'bar',
                barMaxWidth: '25',
                data: data
              }
            ]
          }
        } else {
          this.total2 = '-'
          this.options2 = {}
        }
      })
    },
    // 业务统计-业务数据采集-服务总亩数
    statisticalMuCount () {
      Api.statisticalMuCount({
        startTime: this.time[0] ? dateToFormatYMD(this.time[0]) + ' 00:00:00' : '',
        endTime: this.time[1] ? dateToFormatYMD(this.time[1]) + ' 23:59:59' : '',
      }).then(res => {
        if (res.code == 200) {
          this.total2 = res.data.total || '-'
          let xAxis = [], data = []
          for (let key in res.data.data) {
            xAxis.push(key)
            data.push(res.data.data[key])
          }
          this.options3 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '10',
              right: '10',
              bottom: '10',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: xAxis,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '农机订单服务总亩数',
                type: 'bar',
                barMaxWidth: '25',
                data: data
              }
            ]
          }
        } else {
          this.total2 = '-'
          this.options3 = {}
        }
      })
    },
  },
};
</script>
  
<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100%;
  .contain-box {
    border: 1px solid #57717d;
    .top-title {
      padding: 10px 20px;
      border-bottom: 1px solid #57717d;
    }
  }
  .chart-title {
    text-align: center;
  }
  .top-box {
    width: 100%;
    height: 300px;
    padding: 10px 20px;
    &.two {
      display: flex;
      .bar-box {
        width: 50%;
        height: 100%;
      }
    }
    .chart-view {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .chart-content {
      height: calc(100% - 15px);
    }
  }
}
.mt20 {
  margin-top: 20px;
}
</style>
  